<!--
 @description 跳转方案中心的范围配置
 @fileName SchemeConfig.vue
 @author zengqiongying
 @created 2024/04/01 10:07:46
-->
<template>
  <el-dialog
    ref="refDlg"
    v-el-drag-dialog
    width="650px"
    title="方案范围配置"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="closeDialog"
  >
    <div class="table-main">
      <el-form ref="refForm" :model="formData" :rules="formRules" size="mini" label-width="100px">
        <el-form-item label="方案类型：" prop="typeCodes">
          <QupDictCheckbox
            v-model="formData.typeCodes"
            dict-type-code="DESIGN_TYPE"
            domain-code="marketing"
            app-code="fazx"
            @data-change="getDesignTypeList"
          />
        </el-form-item>
        <el-form-item label="空间：" prop="spaceId">
          <QupSearchSelectPicker
            placeholder="请选择空间"
            :value.sync="formData.spaceCode"
            :lable.sync="formData.spaceName"
            value-name="spaceCode"
            lable-name="spaceName"
            value-key="id"
            method="get"
            :url="spaceUrl"
            :params="{query:{},type:1}"
            :current-id.sync="formData.spaceId"
            @change="clearFormData('spaceId')"
          />
        </el-form-item>
        <el-form-item label="品类：" prop="categoryId">
          <QupSearchSelectPicker
            placeholder="请选择品类"
            :value.sync="formData.categoryId"
            :lable.sync="formData.categoryName"
            value-name="id"
            lable-name="categoryName"
            value-key="id"
            method="get"
            :url="categroyUrl"
            :parent-id="formData.spaceCode"
            must-pid
            :params="{query:{ spaceCode:formData.spaceCode},type:1}"
          />
        </el-form-item>
      </el-form>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button type="primary" size="mini" @click="handleSure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SchemeRangeConfig',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectedId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      spaceUrl: `${process.env.VUE_APP_BASE_API}/api/v1/scheme/2.0/getAllOneSpace`,
      categroyUrl: `${process.env.VUE_APP_BASE_API}/api/v1/scheme/2.0/getCategoryByOneSpace`,
      designDictData: [],
      formData: {
        typeCodes: [],
        spaceId: '',
        spaceName: '',
        spaceCode: '',
        categoryId: '',
        categoryName: ''
      },
      formRules: {
        typeCodes: [
          { required: true, message: '必选', trigger: 'change' }
        ],
        spaceId: [
          { required: true, message: '必选', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '必选', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    selectedId(val, oldVal) {
      this.initData(val)
    }
  },
  created() {
    this.initData(this.selectedId)
  },
  methods: {
    closeDialog() {
      for (const key in this.formData) {
        this.$set(this.formData, key, key === 'typeCodes' ? [] : '')
      }
      this.dialogShow = false
    },
    clearFormData(field) {
      if (field === 'spaceId') {
        this.$set(this.formData, 'categoryId', '')
        this.$set(this.formData, 'categoryName', '')
      }
    },
    initData(str) {
      if ([undefined, null, ''].includes(str)) {
        return {}
      }
      const params = JSON.parse(str)
      for (const key in this.formData) {
        let value = params[key] || ''
        if (key === 'typeCodes') {
          value = value.split(',')
        }
        this.$set(this.formData, key, value)
      }
    },
    getDesignTypeList(data) {
      this.designDictData = data || []
    },
    handleSure() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          const { typeCodes, spaceName, categoryName } = this.formData
          const typeName = this.designDictData.filter(v => typeCodes.includes(v.dictCode)).map(v => v.dictName)
          const params = {
            ...this.formData, ...{ typeName, typeCodes: typeCodes.join(',') }
          }
          const name = `${typeName.join(',')}_${spaceName}_${categoryName}`
          this.$emit('change', {
            value: JSON.stringify(params),
            name: name
          })
          this.closeDialog()
        }
      })
    }
  }
}
</script>

<style lang='scss' scope >
</style>
